<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" size="tiny" :before-close="handleClose">
    <el-row>
      <el-col :span="23">
        <el-form :model="form">
          <el-form-item :label="lable" :label-width="formLabelWidth" v-if="selfid!=''">
            <el-cascader :options="selArr" :props="props" v-model="form.selectedOptions" change-on-select placeholder="请选择类别" @change="handleChange" style="width:100%;">
            </el-cascader>
          </el-form-item>
          <el-form-item label="类别名称" :label-width="formLabelWidth">
            <el-input v-model="form.liebie" placeholder="请填写类别" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ['dialogs', 'is_exit', 'selfid', 'selArr'],
  data() {
    return {
      form: {
        liebie: '',
        selectedOptions: []
      },
      formLabelWidth: "100px",
      dialogFormVisible: false,
      title: '',
      //级联选择配置项
      props: {
        value: '_id',
        label: 'bookname'
      },
      //走的接口
      url: '',
      selArr1: [],
      lable: ''
    }
  },
  watch: {
    'dialogs': function(newValue, oldValue) {
      this.dialogFormVisible = newValue
      if (newValue) {
        if (this.is_exit) {
          this.form.selectedOptions.unshift(this.selfid._id)
          this.getSel();
          this.title = '编辑节点'
          this.url = '/wordbook/update'
          this.lable = '当前类别'
        } else {
          this.url = '/wordbook/insert'
          this.form.selectedOptions.unshift(this.selfid._id)
          this.getSel();
          this.lable = '上级类别'
          if (this.selfid == '') {
            this.title = '添加一级节点'
          } else {
            this.title = '添加子级节点'
          }
        }
      }
    }
  },

  methods: {
    //确定
    async onSubmit() {
      let tableData = await this.fetch(this.url, this.form, this.$store.getters.Request_Head, 'POST')
      if (tableData.status.code !== 1001) {
        this.$message.error(tableData.data ? tableData.data : tableData.status.title)
      } else {
        this.$emit('CB-dialogStatus')
        this.handleClose()
      }
    },
    //关闭前执行
    handleClose() {
      this.form = {
        liebie: '',
        selectedOptions: []
      };
      this.$emit('CB-dialogStatus')
    },
    //级联选择发生变化
    handleChange(val) {
      console.log(val)
    },
    getFiji(arr) {
      for (let i = 0; i < this.selArr1.length; i++) {
        //通过自己的top_id 找上一级
        if (arr.top_id == this.selArr1[i]._id) {
          this.form.selectedOptions.unshift(this.selArr1[i]._id)
          this.getFiji(this.selArr1[i])
        }
      }
    },
    //获得没有递归过的数据的
    async getSel() {
      let tableData = await this.fetch('/wordbook/index', {
        is_menu: 'no'
      }, this.$store.getters.Request_Head, 'POST')
      if (tableData.status.code !== 1001) {
        this.$message.error(tableData.data ? tableData.data : tableData.status.title)
      } else {
        this.selArr1 = tableData.data
        this.getFiji(this.selfid)
      }
    }
  }
}

</script>
